<template>
  <div style="padding: 20px">
    <el-table :data="state.list" v-loading="state.loading">
      <el-table-column label="序号" type="index" min-width="80"></el-table-column>
      <el-table-column label="施工地址" prop="cleaning_site" min-width="120"></el-table-column>
      <el-table-column label="清洗范围" min-width="120" prop="cleaning_range"></el-table-column>
      <el-table-column label="清洗单位" min-width="120" prop="cleaning_unit"></el-table-column>
      <el-table-column label="乙方清洗人员" min-width="120" prop="service_staff"></el-table-column>
      <el-table-column label="清洗人员电话" min-width="120" prop="service_phone"></el-table-column>
      <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
      <el-table-column label="类型" min-width="120">
        <template #default="{ row }">
          <el-tag :type="row.type === 1 ? '' : 'success'">{{ row.type === 1 ? '三关一闭' : '油烟清洗' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="清洗时间" prop="cleaning_time" min-width="120"></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      background
      v-model:current-page="state.pagination.page"
      v-model:page-size="state.pagination.rows"
      layout="->,total, sizes, prev, pager, next, jumper"
      :total="state.total"
      @current-change="getList"
      @size-change="getList"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { dataList } from '@/api/flueClean'
const state = reactive({
  loading: false,
  pagination: {
    rows: 20,
    page: 1
  },
  total: 0,
  list: []
})
const getList = async (page = 1) => {
  state.loading = true
  if (page === 1) state.pagination.page = 1
  const { data } = await dataList(state.pagination).finally(() => (state.loading = false))
  state.list = data.list
  state.total = data.total
}
getList()
</script>

<style lang="scss" scoped></style>
